<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HuyaTv</title>
</head>
<body>
<script type="text/javascript">
    if(!window.WebSocket){
        alert("Your broswer dose not support Web Socket.")
    }
    var currentRoom;
    var t1;

    //1.进入房间
    function inRoom(userId,roomId){
        document.getElementById('responseText').value="";//清空公屏
        //建立连接
        socket = new WebSocket("ws://127.0..0.1:8889/HuyaTv/ws/chat?userId="+userId+"&roomId="+roomId);
        socker.onmessage = function(event) {
            var ta = document.getElementById('responseText');
            ta.value = ta.value+'\n'+event.data;
        };
        socket.onopen = function (event) {
            var ta = document.getElementById('responseText');
            ta.value = "Web Socker opened!";
            t1 = window.setInterval(refresh,3000);//定时三秒刷新
        };
        socket.onclose = function (event) {
            var ta = document.getElementById('responseText');
            ta.value = ta.value+"Web Socket closed!";
            window.clearInterval(t1);//关闭定时刷新
        };

    };

    //2.发消息
    function send(message) {
        if(!window.WebSocket){
            return;
        }
        if(socket.readyState == WebSocket.OPEN){
            socket.send(message);
        }else {
            alert("The socket is not open!")
        }
    }
    //3.刷新房间人数
    function refresh(){
        var ajax=new XMLHttpRequest();
        ajax.open('get','/live/chat/roomInfo?roomId='+currentRoom);
        ajax.send();
        ajax.onreadystatechange('roomInfo').html=ajax.responseText;
    }
</script>
<form onsubmit="return false;">
    <input type="text" name="userId" placeholder="输入你的ID">
    <h3>------ 大厅 ------</h3>
    选择直播间：
    <select id="room">
        <option value="10001">##直播show</option>
        <option value="10002">五五开17杀sks现场教学</option>
        <option value="10003">蔡徐坤鸡你太美</option>
    </select>
    <input type="button" value="进入房间" onclick="inRoom(this.form.userId.value,this.form.room.value)">
    <h3>------ 发消息 ------</h3>
    <input type="text" name="message" value="Hello world!!">
    <input type="button" value="发送" onclick="send(this.form.message.value)">
    <h3>------ 公屏 ------</h3>
    -- 人气：<p id="roomInfo"></p>
    <textarea id="responseText" style="..."></textarea>
    <img width="400px" height="200px" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568909054407&di=800a1414864b47498586c84b1742b6c9&imgtype=0&src=http%3A%2F%2Fdingyue.nosdn.127.net%2FZOyGgR8kH7tFRJLNjo6qmpf8Qd69HzkTX02nWq1L43CiC1553128854967.jpeg">
</form>
</body>
</html>